<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
            show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            quick-search-placeholder="请输入服务名称">
            <!-- 默认插槽 -->
            <!-- <template #default>
                <el-button style="margin-left: 13px" v-if="!adminInfo.is_show_city" @click="platformService" v-blur
                           class="table-header-operate"
                           type="success">
                    <Icon color="#ffffff" name="el-icon-Cpu"/>
                    <span class="table-header-operate-text">选择平台服务</span>
                </el-button>
            </template> -->
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef"></Table>

        <!-- 表单 -->
        <PopupForm />
        <Service :isShow="isShow" @close="close"></Service>
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { useAdminInfo } from "/@/stores/adminInfo";
import Service from "./service.vue";

const adminInfo = useAdminInfo();
defineOptions({
    name: 'service/service',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/service.Service/'),
    {
        pk: 'service_id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: t('service.service.service_id'),
                prop: 'service_id',
                align: 'center',
                operator: 'RANGE',
                sortable: 'custom'
            },
            {
                label: t('service.service.service_cover_img'),
                prop: 'service_cover_img',
                align: 'center',
                render: 'image',
                operator: false,
                sortable: false
            },
            {
                label: t('service.service.service_name'),
                prop: 'service_name',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
                width: 200
            },

            {
                label: t('service.service.service_price'),
                prop: 'service_price',
                align: 'center',
                operator: 'RANGE',
                sortable: false,
                width: 150

            },

            {
                label: "服务时长（分钟）",
                prop: 'service_duration',
                align: 'center',
                operator: false,
                sortable: false,
                width: 150
            },
            {
                label: "分销返佣(%)",
                prop: 'distribution_rebate',
                align: 'center',
                operator: false,
                sortable: false,
                width: 200
            },
            {
                label: "地区",
                prop: 'area.name',
                align: 'center',
                operator: false,
                sortable: false,
                width: 200,
                show: adminInfo.is_show_city
            },
            {
                label: "排序值",
                prop: 'service_weight',
                align: 'center',
                operator: 'RANGE',
                sortable: false,
                width: 100
            },
            {
                label: "服务类型",
                prop: 'type',
                align: 'center',
                operator: 'eq',
                sortable: false,
                width: 100,
                render: 'tag',
                replaceValue: {
                    1: '正常服务',
                    2: '加钟服务'
                },
                custom: {
                    1: 'success',
                    2: 'warning'
                }
            },
            {
                label: "是否上架",
                prop: 'service_status',
                align: 'center',
                render: 'switch',
                operator: 'eq',
                sortable: false,
                width: 150,
                replaceValue: {
                    0: '下架',
                    1: '上架'
                }

            },
            // { label: t('service.service.service_ascription_id'), prop: 'service_ascription_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            {
                label: t('service.service.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
                width: 300
            },
            // { label: t('service.service.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom',  timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            // { label: t('service.service.service_is_check'), prop: 'service_is_check', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('Operate'), align: 'center', render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: ['all'],
        defaultOrder: { prop: 'service_id', order: 'desc' },
        showComSearch: true
    },
    {
        defaultItems: {
            service_price: 0,
            sales_volume: 0,
            service_duration: 0,
            distribution_rebate: 0,
            service_weight: 0,
            service_is_check: 0,
            clock_distribution_rebate: 0
        },
    },
)
provide('baTable', baTable)

const isShow = ref(false)
const platformService = () => {
    isShow.value = true
}

const close = () => {
    isShow.value = false
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}
onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss"></style>
